<template>
    <div id="bottomTable">
        <el-table :data="formData" stripe style="width: 100%" height="320" ref="table">
            <el-table-column prop="HOS_NAME" align="center" label="就诊医院" width="180" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="VALUE1" align="center" label="门诊量" show-overflow-tooltip>
                <template slot-scope="scope">
                    {{ (scope.row.VALUE1 ? scope.row.VALUE1 : 0) + "人" }}
                </template>
            </el-table-column>
            <el-table-column prop="VALUE2" align="center" label="入院人次" show-overflow-tooltip>
                <template slot-scope="scope">
                    {{ (scope.row.VALUE2 ? scope.row.VALUE2 : 0) + "人" }}
                </template>
            </el-table-column>
            <el-table-column prop="VALUE3" align="center" label="在院人次" show-overflow-tooltip>
                <template slot-scope="scope">
                    {{ (scope.row.VALUE3 ? scope.row.VALUE3 : 0) + "人" }}
                </template>
            </el-table-column>
            <el-table-column prop="VALUE4" align="center" label="出院人次" show-overflow-tooltip>
                <template slot-scope="scope">
                    {{ (scope.row.VALUE4 ? scope.row.VALUE4 : 0) + "人" }}
                </template>
            </el-table-column>
            <el-table-column prop="referralCount" align="center" label="转诊量" show-overflow-tooltip>
                <template slot-scope="scope">
                    {{
                        (scope.row.referralCount
                            ? scope.row.referralCount
                            : 0) + "人"
                    }}
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
import { getDetailasData } from "../commonJs/data";
import Mock from "mockjs";
export default {
    data() {
        return {

            formData: [{
                HOS_NAME: "人民医院", VALUE1: Mock.Random.integer(500, 1000), VALUE2: Mock.Random.integer(50, 100),
                VALUE3: Mock.Random.integer(20, 50), VALUE4: Mock.Random.integer(10, 25), referralCount: Mock.Random.integer(10, 15)
            },
            {
                HOS_NAME: "二院", VALUE1: Mock.Random.integer(300, 800), VALUE2: Mock.Random.integer(50, 100),
                VALUE3: Mock.Random.integer(20, 50), VALUE4: Mock.Random.integer(10, 25), referralCount: Mock.Random.integer(10, 15)
            },
            {
                HOS_NAME: "中医院", VALUE1: Mock.Random.integer(300, 700), VALUE2: Mock.Random.integer(50, 100),
                VALUE3: Mock.Random.integer(20, 50), VALUE4: Mock.Random.integer(10, 25), referralCount: Mock.Random.integer(10, 15)
            },
            {
                HOS_NAME: "妇幼保健", VALUE1: Mock.Random.integer(300, 600), VALUE2: Mock.Random.integer(50, 100),
                VALUE3: Mock.Random.integer(20, 50), VALUE4: Mock.Random.integer(10, 25), referralCount: Mock.Random.integer(10, 15)
            },
            {
                HOS_NAME: "乡镇卫生院", VALUE1: Mock.Random.integer(150, 300), VALUE2: Mock.Random.integer(10, 20),
                VALUE3: Mock.Random.integer(5, 15), VALUE4: Mock.Random.integer(5, 10), referralCount: Mock.Random.integer(10, 15)
            }],
            timer: null,
        };
    },

    mounted() {
        // getDetailasData(this.sortData);
        // this.tableScroll();

        let divData = this.$refs.table.bodyWrapper;
        setInterval(() => {
            divData.scrollTop += 1;
            if (
                divData.clientHeight + divData.scrollTop >
                divData.scrollHeight - 2
            ) {
                divData.scrollTop = 0;
            }
        }, 30);
    },

    destroyed() {
        clearInterval(this.timer);
        this.timer = null;
    },

    methods: {

        // sortData(data) {
        //     this.formData = data;
        // },

        tableScroll() {
            this.divData = this.$refs.table.bodyWrapper;
            setInterval(() => {
                this.divData.scrollTop += 1;
                // if (
                //     divData.clientHeight + divData.scrollTop >
                //     divData.scrollHeight + 1
                // ) {
                //     divData.scrollTop = 0;
                // }
            }, 1000);
        },
    },
};
</script>
<style lang="scss">
#bottomTable {
    width: 100%;
    height: 100%;

    .el-table {
        &::before {
            background: transparent;
        }

        background: transparent;

        .el-table__row td:first-child .cell {
            // background:rgb(96,64,192,0.2);
            // border-radius: 10px;
            font-weight: 600;
        }

        .el-table__expanded-cell {
            background: transparent;
        }

        .el-table__header {
            margin-top: 8px;

            th>.cell {
                font-size: 18px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #ffb317;
            }
        }

        .el-table__body-wrapper {
            height: 264px;
            overflow-y: auto;

            .cell {
                font-size: 18px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #ffffff;
                height: 44px;
                line-height: 44px;
                background: rgba(79, 166, 229, 0.04);

                &.el-tooltip {
                    width: auto !important;
                }
            }
        }

        td {
            padding: 4px 0;
        }

        th,
        tr {
            background: transparent;
        }

        tr,
        tr:hover {
            background: transparent;

            td .cell {
                color: #fff;
                background-image: linear-gradient(rgba(255, 220, 26, 0.36),
                        rgba(255, 220, 26, 0.2),
                        rgba(255, 220, 26, 0.36));
            }

            td.el-table__cell {
                background-color: transparent;
            }
        }

        td,
        .is-leaf {
            border: none;
        }
    }
}
</style>